<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .welcome {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .features {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
        }

        .feature-card {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            width: 250px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .feature-card h3 {
            color: #4CAF50;
            margin-top: 0;
        }

        .feature-card p {
            color: #666;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

        .btn:hover {
            background-color: #45a049;
        }

        .quick-links {
            text-align: center;
            margin-top: 30px;
        }

        .quick-links h2 {
            color: #333;
        }

        .links-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .link-card {
            background-color: #f0f8ff;
            border-radius: 8px;
            padding: 20px;
            width: 200px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .link-card h3 {
            color: #4CAF50;
            margin-top: 0;
        }

        footer {
            text-align: center;
            padding: 20px;
            background-color: #333;
            color: white;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>车辆管理系统</h1>
    <p>一站式车辆信息管理平台</p>
</div>

<div class="container">
    <div class="welcome">
        <h2>欢迎使用车辆管理系统</h2>
        <p>请登录或注册以开始管理您的车辆信息</p>
    </div>

    <div class="features">
        <div class="feature-card">
            <h3>车辆管理</h3>
            <p>添加、查看、编辑和删除您的车辆信息</p>
        </div>
        <div class="feature-card">
            <h3>用户账户</h3>
            <p>安全的用户认证和账户管理系统</p>
        </div>
        <div class="feature-card">
            <h3>数据安全</h3>
            <p>保护您的车辆数据安全和隐私</p>
        </div>
    </div>

    <div class="quick-links">
        <h2>快速开始</h2>
        <p>如果您已有账户，请登录；如果没有，请先注册</p>

        <div class="links-container">
            <div class="link-card">
                <h3>登录</h3>
                <p>已有账户？立即登录</p>
                <a href="login.html" class="btn">登录</a>
            </div>

            <div class="link-card">
                <h3>注册</h3>
                <p>新用户？立即注册</p>
                <a href="reg.html" class="btn">注册</a>
            </div>

            <div class="link-card">
                <h3>添加车辆</h3>
                <p>添加新的车辆信息</p>
                <a href="addVehicle.html" class="btn">添加车辆</a>
            </div>
        </div>
    </div>
</div>

<footer>
    <p>&copy; 2023 车辆管理系统. 保留所有权利.</p>
</footer>

<script>
    // 检查用户是否已登录
    document.addEventListener('DOMContentLoaded', function() {
        // 可以在这里添加检查用户登录状态的逻辑
        // 如果用户已登录，可以显示不同的内容或选项
    });
</script>
</body>
</html>
